<template>
<div class="type-wrap">
    <div class="btn-group clearfix">
        <el-button type="primary" icon="el-icon-circle-plus" @click="add">类型添加</el-button>
        <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
        <div class="r search">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
        </div>
    </div>
    <template>
        <el-table :data="listData" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="title" label="中文名称" width="180px"></el-table-column>
            <el-table-column prop="name" label="英文名称"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="sortDelete(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages">

            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page.sync="page.current_page" :page-size="1" layout="prev, pager, next, jumper" :total="page.last_page">
            </el-pagination>

        </div>
    </template>

    <el-dialog :title="fromTitle" :visible.sync="addType" width="30%">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="中文名称" prop="cn_title">
                <el-input v-model="form.cn_title"></el-input>
            </el-form-item>
            <el-form-item label="英文名称" prop="en_title">
                <el-input v-model="form.en_title"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">{{ type == 'add' ? '立即创建' : '确认修改' }}</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>

<script>
export default {
    name: "Type",
    data() {
        let en_title_rules = (rule, value, callback) => {
            let reg = /[a-zA-Z]/
            if (!reg.test(value)) {
                callback(new Error('英文名称必须是全英文'))
            } else {
                callback()
            }
        };
        return {
            type: null,
            addType: false,
            fromTitle: '',
            form: {
                cn_title: "",
                en_title: ""
            },
            listData: null,
            edit_id: null,
            rules: {
                cn_title: [{
                        required: true,
                        message: '请输入中文名称',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 15,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur'
                    }
                ],
                en_title: [{
                    validator: en_title_rules,
                    trigger: 'blur'
                }]
            },
            page: {
                last_page: null,
                current_page: null,
                total: null
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        async getData(page = 1) {
            let params = {};
            params.page = page;
            await this.axios.get('/api/store/admin/type/list', {
                    params
                })
                .then(r => {
                    this.listData = r.data.data.data;
                    this.page.total = r.data.data.total;
                    this.page.last_page = r.data.data.last_page;
                    this.page.current_page = r.data.data.current_page;
                })
                .catch(e => {
                    console.log(e);
                })
        },
        add() {
            this.addType = true;
            this.type = 'add'
            this.form = {};
            this.fromTitle = '分类添加';
        },
        refresh() {
            this.getData(this.page.current_page);
            this.$message({
                message: '刷新成功',
                type: 'success'
            });
        },
        handleClick(e) {
            this.type = 'edit';
            this.fromTitle = `编辑 [ ${e.title} ]`
            this.form.cn_title = e.title;
            this.form.en_title = e.name;
            this.edit_id = e.id;
            this.addType = true
        },
        sortDelete(e) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios.get('/api/store/admin/type/delete/' + e.id)
                    .then(r => {
                        if (r.data.code == 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getData(this.page.current_page);
                        }
                    })
                    .catch(e => console.log(e));
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {};
                    params.title = this.form.cn_title;
                    params.name = this.form.en_title;
                    let url = null
                    if (this.type == 'add') {
                        url = '/api/store/admin/type/create';
                    } else {
                        url = '/api/store/admin/type/edit/' + this.edit_id;
                    }

                    this.axios.post(url, params).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            });
                            this.addType = false
                            this.getData();
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        pageSizeChange(val) {
            console.log(val);
        },
        pageCurrentChange(val) {
            this.getData(val);
        }
    }
};
</script>

<style scoped>
.pages {
    padding: .5rem;
    text-align: center;
}
</style>
